<template>
    <div class="Recommend">
        <div class="title">热销推荐</div>
        <ul>
            <router-link class="item border-bottom" v-for="item of list" :key="item.id" tag="li" :to="'/detail/'+item.id">
                <img class="item-img" :src="item.imgUrl"/>
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                    <button class="item-button">查看详情</button>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        name:'HomeRecomemnd',
        props: {
            list: Array
        },
    };
</script>
<style lang="stylus" scoped>
    @import "~@/assets/Styles/mixins.styl"
    .title
      margin-top :.2rem
      line-height :.8rem
      background :#eee
      text-indent :.2rem
    .item
      overflow :hidden
      display :flex
      height :1.9rem
      .item-img
        width :1.7rem
        height :1.7rem
        padding :.1rem
      .item-info
        flex :1
        min-width :0
        padding :.1rem
        .item-title
          line-height :.54rem
          ellipse()
          font-size :.32rem
        .item-desc
          line-height :.4rem
          color :#ccc
          ellipse()
        .item-button
          line-height :.44rem
          margin-top :.16rem
          background :#ff9300
          padding :0 .1rem
          color :#fff
          border-radius :.06rem

</style>
